<template>
	<view class="content">
		<view class="primary-title text">{{pageType}}职位</view>
		<view class="sub-title text" v-if="form.id == 0">我们会根据你发布的职位，推荐合适的简历</view>
		<view class="alert" style="margin-bottom: 30rpx;" v-if="form.id == 0">
			<view class="alert-time-iconfont">
				<view class="iconfont icon-xinxi" style="font-size: 56rpx;"></view>
			</view>
			<view class="alert-time">
				<view style="display: flex;">
					<view class="alert-title">发布警告</view>
				</view>
				<view class="alert-time-text">
					严禁发布虚假职位信息，同时职位信息不得包含歧视性内容（如学校、性别等）。一经发现，平台有权采取包括但不限于封停账号、全站公示、解除合作等管控措施！
				</view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位名称</view>
			<view class="form-content">
				<input v-model="form.jobTitle" maxlength="30" type="text" placeholder="请填写职位名称"
					placeholder-class="inputPlaceholder" class="form-ctrl" />
				<view class="arrow iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位分类</view>
			<view class="form-content">
				<picker :class="form.recruitType==-1 ? 'form-ctrl form-item-default':'form-ctrl'" :range="typeList"
					range-key="title" :value="form.recruitType" @change="bindType">
					{{form.recruitType==-1 ? "请选择职位分类" : typeList[form.recruitType]['title']}}
				</picker>
				<view class="iconfont icon-gengduo1 arrow"></view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">是否急招</view>
			<view class="form-content">
				<picker :class="form.worryType==-1 ? 'form-ctrl form-item-default':'form-ctrl'" :range="worryList"
					range-key="title" :value="form.worryType" @change="bindWorryType">
					{{form.worryType==-1 ? "请选择是否急招" : worryList[form.worryType]['title']}}
				</picker>
				<view class="iconfont icon-gengduo1 arrow"></view>
				<!-- <view v-if="form.worry>0">
					<switch v-model="form.worry" checked @change="switchChange" color="#FF7626"
						style="transform:scale(0.7)" />
				</view>
				<view v-else>
					<switch v-model="form.worry" @change="switchChange" color="#FF7626" style="transform:scale(0.7)" />
				</view> -->
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位类别</view>
			<view class="form-content">
				<input :value="postName" type="text" placeholder="请选择职位类别" placeholder-class="inputPlaceholder"
					disabled="true" @click="chooseJobCategory" class="form-ctrl" />
				<view class="iconfont icon-gengduo1 arrow"></view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位需求人数</view>
			<view class="form-content">
				<input v-model="form.jobNumber" min="1" max="500" maxlength="3" type="number" placeholder="请输入小于500且正整数"
					placeholder-class="inputPlaceholder" class="form-ctrl" />
				<view class="arrow iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位关键字</view>
			<view class="form-content">
				<input v-model="form.keyword" maxlength="20" type="text" placeholder="请填写关键字以逗号隔开,以便于匹配求职者"
					placeholder-class="inputPlaceholder" class="form-ctrl" />
				<view class="arrow iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="block picker-block">
			<view class="block-item">
				<view class="form-title">经验要求</view>
				<picker @change="bindExperience" class="form-ctrl" :range="experienceList" range-key="data"
					:value="form.expId">{{experienceList[form.expId]['data']}}</picker>
			</view>
			<view class="line"></view>
			<view class="block-item">
				<view class="form-title">最低学历</view>
				<picker @change="bindEducation" class="form-ctrl" :range="educationList" range-key="data"
					:value="form.eduId">{{educationList[form.eduId]['data']}}</picker>
			</view>
			<view class="line"></view>
			<view class="block-item">
				<view class="form-title">薪资范围(月薪)</view>
				<picker class="form-ctrl" mode="multiSelector" :value="salaryIndexArr" :range="salary"
					@columnchange="salaryColChange" @change="salaryChange">{{form.minSalary}}-{{form.maxSalary}}元
				</picker>
			</view>
		</view>
		<view class="block">
			<view class="form-title">标准工作时间</view>
			<view class="form-content">
				<picker class="form-ctrl picker" mode="time" :value="form.startTime" start="00:00" end="22:59"
					@change="bindTimeStart" style="flex-grow: unset;">
					<view class="uni-input">{{form.startTime}}</view>
				</picker>
				<view class="form-ctrl" style="flex-grow: unset;padding:0 10rpx;">-</view>
				<picker class="form-ctrl" mode="time" :value="form.endTime" start="01:00" end="23:59"
					@change="bindTimeEnd">
					<view class="uni-input">{{form.endTime}}</view>
				</picker>
				<view class="iconfont icon-gengduo1 arrow"></view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位描述</view>
			<view class="form-content">
				<input :value="form.jobDescription" type="text" placeholder="请填写职位描述"
					placeholder-class="inputPlaceholder" disabled="true" @click="chooseJobDescription"
					class="form-ctrl" />
				<view class="arrow iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="block">
			<view class="form-title">职位福利</view>
			<view class="form-content">
				<input :value="form.welfare" type="text" placeholder="请填写职位福利" placeholder-class="inputPlaceholder"
					disabled="true" @click="chooseJobWelfare" class="form-ctrl" />
				<view class="arrow iconfont icon-gengduo1"></view>
			</view>
		</view>

		<view class="block">
			<view class="form-title">工作地址</view>
			<view class="form-content">
				<input v-model="form.jobAddress" @click="chosenPosition" type="text" placeholder="请选择工作地址"
					disabled="true" placeholder-class="inputPlaceholder" class="form-ctrl" />
				<view class="arrow iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="text darkgray fs12" style="margin-top: 30rpx;">发布职位即表示您已阅读并同意<text style="color: #313131;"
				@click="openFile">《职位发布规则》</text>
		</view>
		<view v-if="recruitState == 3|| recruitState == 4" class="btn-group">
			<view class="btn close-btn" @click="confirmClose">{{recruitState==4?'开启':'关闭'}}</view>
			<view class="btn" @click="confirm">{{btnText}}</view>
		</view>
		<view v-else>
			<view class="btn" @click="confirm">{{btnText}}</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		addAndUpdateJob as submitPositionInfo,
		findAllJobById as getInfoById,
		doClosePublish as closePosition,
		openPosition
	} from '@/api/position.js';
	import {
		getExperience as getExperienceList,
		getEducation as getEducationList,

	} from '@/api/config.js';
	import {
		SplitArray,
		showToast,
		getSalaryData
	} from '@/util/util.js'
		import {getStorage} from '@/util/auth.js'
		import {
			getUser
		} from '@/api/user.js'
	export default {
		data() {
			return {
				exType: 0,
				form: {
					jobTitle: '',
					recruitType: 0,
					jobType: '',
					expId: 0,
					eduId: 4,
					minSalary: 3000,
					maxSalary: 4000,
					startTime: '08:30',
					endTime: '18:00',
					jobAddress: '',
					latitude: '',
					longitude: '',
					id: 0,
					keyword: '',
					jobNumber:'1',
					worryType: 0,
					worry: null,
					jobDescription: '',
					welfare: ''
				},
				streetValue: [{
						id: 1,
						title: '东北街街道',
						count: 154
					},
					{
						id: 2,
						title: '东南街街道',
						count: 102
					},
					{
						id: 3,
						title: '西北街街道',
						count: 98
					},
					{
						id: 4,
						title: '西南街道',
						count: 121
					},
					{
						id: 5,
						title: '西洞镇',
						count: 85
					},
					{
						id: 6,
						title: '清水镇',
						count: 126
					},
					{
						id: 7,
						title: '总寨镇',
						count: 154
					},
					{
						id: 8,
						title: '金佛寺镇',
						count: 102
					},
					{
						id: 9,
						title: '上坝镇',
						count: 98
					},
					{
						id: 10,
						title: '三墩镇',
						count: 121
					},
					{
						id: 11,
						title: '银达镇',
						count: 85
					},
					{
						id: 12,
						title: '西峰镇',
						count: 126
					},
					{
						id: 13,
						title: '泉湖镇',
						count: 154
					},
					{
						id: 14,
						title: '果园镇',
						count: 102
					},
					{
						id: 15,
						title: '下河清镇',
						count: 98
					},
					{
						id: 16,
						title: '铧尖镇',
						count: 121
					},
					{
						id: 17,
						title: '东洞镇',
						count: 85
					},
					{
						id: 18,
						title: '丰乐镇',
						count: 126
					},
					{
						id: 19,
						title: '黄泥堡乡',
						count: 126
					}
				],
				postName: '',
				recruitState: 0,


				rules: {
					jobTitle: {
						name: '职位名称',
						required: true
					},
					number:{
						name: '需求人数',
						required: true
					},
					keyword: {
						name: '职位关键字',
						required: true
					},
					recruitType: {
						name: '职位分类',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择职位分类')
							}
							callback();
						}
					},
					worryType: {
						name: '是否急招',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择是否急招')
							}
							callback();
						}
					},
					jobType: {
						name: '职位类别',
						required: true
					},
					expId: {
						name: '经验要求',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择经验要求')
							}
							callback();
						}
					},
					eduId: {
						name: '最低学历',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择最低学历')
							}
							callback();
						}
					},
					minSalary: {
						name: '薪资范围',
						required: true
					},
					maxSalary: {
						name: '薪资范围',
						required: true
					},
					startTime: {
						name: '工作开始时间',
						required: true,
					},
					endTime: {
						name: '工作结束时间',
						required: true,
					},
					jobDescription: {
						name: '职位描述',
						required: true,
					},
					welfare: {
						name: '职位福利',
						required: true,
					},
					jobAddress: {
						name: '工作地址',
						required: true,
					},
					latitude: {
						name: '纬度',
						required: true,
					},
					longitude: {
						name: '经度',
						required: true,
					},
				},

				typeList: [{
						id: 1,
						title: '全职'
					},
					{
						id: 2,
						title: '兼职'
					}
				],
				worryList: [{
						id: 1,
						title: '否',
						state: false
					},
					{
						id: 2,
						title: '是',
						state: true
					}
				],
				experienceList: [],
				educationList: [],

				//薪资选择
				salary: [],
				salaryIndexArr: [0, 0],

				type: '',
				btnText: '',
				pageType: '',
				//salaryExpectationActive:[0,0]
				welfareList: []
			}
		},
		methods: {
			salaryChange(e) {
				this.form.minSalary = this.salary[0][e.detail.value[0]]
				this.form.maxSalary = this.salary[1][e.detail.value[1]]
			},
			salaryColChange(e) {
				if (e.detail.column == 0) {
					this.getSalary(e.detail.value + 1)
				}
			},
			getSalary(select) {
				this.salary = getSalaryData(select);
			},
			bindType(e) {
				this.form.recruitType = e.detail.value
			},
			bindWorryType(e) {
				this.form.worryType = e.detail.value
			},
			switchChange(e) {
				this.form.worry = e.detail.value
			},
			chooseJobCategory() {
				uni.navigateTo({
					url: '/page_other/job_category/index?max=1'
				})
			},
			chooseJobDescription() {
				uni.navigateTo({
					url: '/page_other/position/job_description?id=' + this.form.id
				})
			},
			chooseJobWelfare() {
				uni.navigateTo({
					url: '/page_other/position/job_welfare?id=' + this.form.id
				})
			},
			openFile() {
				uni.downloadFile({
					url: 'https://www.mashangjiuye.com/api/file/pdf/publish.pdf',
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			getExperience(resolve, reject) {
				getExperienceList().then((res) => {

					this.experienceList = res ?? [];
					resolve()

				}).catch((res) => {
					reject(res)
				})
			},

			getEducation(resolve, reject) {
				getEducationList().then((res) => {
					this.educationList = res ?? [];
					resolve()

				}).catch((res) => {
					reject(res)
				})
			},

			bindExperience(e) {
				this.form.expId = e.detail.value
			},
			bindEducation(e) {
				this.form.eduId = e.detail.value
			},
			bindTimeStart(e) {
				this.form.startTime = e.target.value
			},
			bindTimeEnd(e) {
				this.form.endTime = e.target.value
			},

			//选择位置
			chosenPosition() {
				//获取当前位置
				var that = this;
				const currentLocation = uni.getLocation({
					isHighAccuracy: true,
					success(current) {
						const currentLatitude = current.latitude;
						const currentLongitude = current.longitude;
						uni.chooseLocation({
							latitude: currentLatitude,
							longitude: currentLongitude,
							success: (choosen) => {
								delete choosen.errMsg;
								//console.log(choosen);
								that.form.jobAddress = choosen.address;
								that.form.latitude = choosen.latitude;
								that.form.longitude = choosen.longitude;
							},
							fail: (err) => {
								console.log(err);
								showToast('选择位置失败，请重试！');
							}
						})
					},
					fail: (e) => {
						console.log(e);
						showToast('获取位置失败，请重试！');
					}
				})
			},

			//编辑
			getInfo(resolve, reject) {
				getInfoById({
					id: this.form.id
				}).then((res) => {
					const info = res;
					this.form.jobTitle = info.jobTitle;
					this.form.jobType = info.jobType;
					this.postName = info.jobTypeText;
					this.recruitState = info.recruitState;

					this.form.startTime = info.startTime;
					this.form.endTime = info.endTime;
					this.exType = info.exType;

					this.form.jobDescription = info.jobDescription;
					this.form.jobAddress = info.jobAddress;
					this.form.latitude = info.latitude;
					this.form.longitude = info.longitude;
					this.form.minSalary = info.minSalary
					this.form.maxSalary = info.maxSalary
					this.form.keyword = info.keyword
					this.form.worryType = info.worry
					this.form.welfare = info.welfare
					this.welfareList = info.welfareList
					this.form.jobNumber = info.jobNumber
					this.typeList.forEach((item, index) => {
						if (item.id == info.recruitType) {
							this.form.recruitType = index;
							return;
						}
					})
					this.experienceList.forEach((item, index) => {
						if (item.id == info.expId) {
							this.form.expId = index;
							return;
						}
					})
					this.educationList.forEach((item, index) => {
						if (item.id == info.eduId) {
							this.form.eduId = index;
							return;
						}
					})
					this.salaryIndexArr = [info.minSalary / 1000 - 1, (info.maxSalary - info.minSalary) / 1000 - 1]
					this.getSalary(res.minSalary / 1000);
					resolve();
				}).catch((res) => {
					reject(res)
				})
			},

			//关闭
			confirmClose() {
				uni.showModal({
					title: '提示',
					content: '确定要关闭该职位吗？',
					success: (modelRes) => {
						if (modelRes.confirm) {
							this.close();
						}
					}
				});
			},

			close() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				if (this.recruitState == 3) {
					closePosition({
						postId: this.form.id
					}).then((res) => {
						uni.hideLoading()
						showToast('关闭成功', function() {
							uni.navigateBack()
						})
					}).catch((res) => {
						uni.hideLoading()
					})
				} else {
					openPosition({
						postId: this.form.id
					}).then((res) => {
						uni.hideLoading()
						showToast('开启成功', function() {
							uni.navigateBack()
						})
					}).catch((res) => {
						uni.hideLoading()
					})
				}

			},

			//是否询问
			confirm() {
				if (this.form.id) {
					uni.showModal({
						title: '提示',
						content: '保存后需要重新审核，确定吗？',
						success: (modelRes) => {
							if (modelRes.confirm) {
								this.save();
							} else if (modelRes.cancel) {
								//this.utils.showToast("取消成功");
							}
						}
					});
				} else {
					this.save();
				}
			},

			//提交
			save() {
				const form = JSON.parse(JSON.stringify(this.form));
				form.recruitType = this.typeList[this.form.recruitType].id;
				form.expId = this.experienceList[this.form.expId].id;
				form.eduId = this.educationList[this.form.eduId].id;
				form.worryType = this.worryList[this.form.worryType].id;
				form.worry = this.worryList[this.form.worryType].state;
				form.salaryNegotiable = 0
				if (validate(form, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})

					submitPositionInfo(form).then((res) => {
						uni.hideLoading()
						this.showToast(this.pageType + '成功，等待审核', function() {
							uni.redirectTo({
								url: '/page_other/position/position_manage'
							})
						})
					}).catch((res) => {
						uni.hideLoading()
					})
				}

			},

		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})

			if (e.id) {
				//编辑
				this.form.id = e.id;
				this.btnText = '保存';
				this.pageType = '编辑';
				uni.setNavigationBarTitle({
					title: '编辑职位'
				})

				var promise1 = new Promise((resolve, reject) => {
					this.getExperience(resolve, reject);
				})
				var promise2 = new Promise((resolve, reject) => {
					this.getEducation(resolve, reject);
				})
				var promise3 = new Promise((resolve, reject) => {
					this.getInfo(resolve, reject);
				})
			} else {
				this.getSalary(1);
				this.btnText = '发布';
				this.pageType = '发布';

				var promise1 = new Promise((resolve, reject) => {
					this.getExperience(resolve, reject);
				})
				var promise2 = new Promise((resolve, reject) => {
					this.getEducation(resolve, reject);
				})
				//var promise3 = resolve();
			}

			Promise.all([promise1, promise2, promise3]).then((res) => {
				uni.hideLoading()
			}).catch((res) => {
				uni.hideLoading()
				showToast('加载失败，请重试', () => {
					uni.navigateBack()
				})
			})

			let _this = this;
			uni.$on('getJobCategory', function(e) {
				var demo = '',
					postName = '';
				for (var i = 0; i < e.length; i++) {
					demo += e[i].id + ',';
					postName += e[i].jobTitle + ' | ';
				}
				_this.form.jobType = demo.substr(0, demo.length - 1);
				_this.postName = postName.substr(0, postName.length - 3);
			})
			uni.$on('getJobDescription', function(e) {
				_this.form.jobDescription = e;
			})
			uni.$on('getWelfare', function(e) {
				_this.form.welfare = e;
			})
		},
		onUnload() {
			uni.$off('getJobCategory')
			uni.$off('getJobDescription')
			uni.$off('getWelfare')
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.btn-group {
			display: flex;

			.btn {
				width: calc(100% / 2 - 20rpx);
			}
		}

		.text {
			margin: 10rpx 0;
		}

		.alert {
			background-color: #fdf6ec;
			color: #e6a23c;
			width: 100%;
			display: flex;

			.alert-time-iconfont {
				padding-left: 20rpx;
				padding-top: 85rpx;
				color: #e6a23c;
				font-weight: bold;
			}

			.alert-time {
				padding-left: 20rpx;
				padding-top: 20rpx;
				font-size: 32rpx;
				color: #e6a23c;

				.alert-title {
					font-weight: bold;
				}

				.alert-time-text {
					font-size: 26rpx;
					margin: 20rpx 20rpx 20rpx 0;
				}
			}

		}

		.primary-title {
			font-size: 46rpx;
			font-weight: bold;
			color: #313131;
		}

		.sub-title {
			font-size: 28rpx;
			color: #313131;
		}

		.block {
			width: 100%;
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;

			.form-title {
				font-size: 28rpx;
				color: #313131;
			}

			.form-content {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.arrow {
					width: 80rpx;
					text-align: right;
					color: #ccc;
					font-size: 28rpx;
					flex-grow: 0;
				}

				.form-ctrl {
					flex-grow: 1;
					height: 80rpx;
					font-size: 28rpx;
					line-height: 80rpx;
				}

				.form-item-default {
					color: #999;
				}
			}
		}

		.block.picker-block {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex-wrap: nowrap;
			margin-top: 0;
			padding: 30rpx 0;

			.line {
				width: 1px;
				height: 50rpx;
				background: #efefef;
			}

			.block-item {
				width: calc((100% - 2px)/3);

				.form-title {
					text-align: center;
				}

				.form-ctrl {
					width: 100%;
					font-size: 30rpx;
					font-weight: bold;
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}

		.btn {
			width: 420rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}

		.close-btn {
			background-color: red;
		}
	}
</style>
